<template>
	<view class="goodsShare-container">
		<view class="pre-commission-box">
			<image src="@/static/common/money-icon.png" class="money-icon"></image>
			<text class="pre-commission-box-text">分享商品给别人购买后，预计可得佣金￥{{ goodsShareInfo.rebates }}</text>
		</view>
		<view class="pre-pic-box">
			<view class="pre-pic-box-title">
				<view class="pre-pic-box-title-left">
					<view class="pre-pic-box-title-left-text">商品图片</view>
					<view class="pre-pic-box-title-left-index">
						<text class="pre-pic-box-title-left-index-ac">{{ currentChoosePrePicList.length }}</text>
						<text>/{{ goodsShareInfo?.carouselImg?.length }}</text>
					</view>
				</view>
				<view @click="allChoosePrePic" class="pre-pic-box-title-right">全选</view>
			</view>
			<scroll-view scroll-x="true" class="pre-pic-box-list-scrollView">
				<view class="pre-pic-box-list">
					<view @click="chooseRrePic(item)" v-for="(item, index) in goodsShareInfo.carouselImg" :key="index" class="pre-pic-box-list-item">
						<image :src="item" class="pre-pic-box-list-item-pic"></image>
						<image
							v-if="currentChoosePrePicList.find((currentChoose) => currentChoose == item)"
							src="@/static/common/circle-icon-ac.png"
							class="pre-pic-box-list-item-pic-Choose"
						></image>
						<image v-else src="@/static/common/circle-icon.png" class="pre-pic-box-list-item-pic-Choose"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="Copywriting-box">
			<view class="Copywriting-box-title">
				<view class="Copywriting-box-title-left">
					<view class="Copywriting-box-title-left-text">分享文案</view>
				</view>
				<view @click="copyText" class="Copywriting-box-title-right">复制文案</view>
			</view>
			<view class="Copywriting-box-content">
				<!-- 标题输入框 -->
				<textarea v-model="goodsShareInfo.titleText" v-if="showTitleText" auto-height class="Copywriting-box-content-input" />
				<!-- 分隔符输入框 -->
				<textarea v-model="gapText" auto-height class="Copywriting-box-content-input" />
				<!-- 口令输入框 -->
				<textarea v-model="goodsShareInfo.pwdText" v-if="showPwdText" auto-height class="Copywriting-box-content-input" />
				<!-- 下单链接输入框 -->
				<textarea v-model="goodsShareInfo.linkText" v-if="showLinkText" auto-height class="Copywriting-box-content-input" />
				<!-- 佣金输入框 -->
				<textarea v-model="goodsShareInfo.rebatesText" v-if="showRebatesText" auto-height class="Copywriting-box-content-input" />
				<!-- 邀请码输入框 -->
				<textarea v-model="goodsShareInfo.invitationCodeText" v-if="showInvitationCodeText" auto-height class="Copywriting-box-content-input" />
			</view>
			<view class="control-text-show-box">
				<view v-if="goodsShareInfo.pwdText" @click="controlShow('pwdText')" class="control-text-show-box-item">
					<image v-if="showPwdText" src="@/static/common/circle-icon-ac.png" class="showText"></image>
					<image v-else src="@/static/common/circle-icon-1.png" class="showText"></image>
					<text class="control-text-show-box-item-text">淘口令</text>
				</view>
				<view v-if="goodsShareInfo.linkText" @click="controlShow('linkText')" class="control-text-show-box-item">
					<image v-if="showLinkText" src="@/static/common/circle-icon-ac.png" class="showText"></image>
					<image v-else src="@/static/common/circle-icon-1.png" class="showText"></image>
					<text class="control-text-show-box-item-text">下单链接</text>
				</view>
				<view v-if="goodsShareInfo.rebatesText" @click="controlShow('rebatesText')" class="control-text-show-box-item">
					<image v-if="showRebatesText" src="@/static/common/circle-icon-ac.png" class="showText"></image>
					<image v-else src="@/static/common/circle-icon-1.png" class="showText"></image>
					<text class="control-text-show-box-item-text">佣金显示</text>
				</view>
				<view v-if="goodsShareInfo.invitationCodeText" @click="controlShow('invitationCodeText')" class="control-text-show-box-item">
					<image v-if="showInvitationCodeText" src="@/static/common/circle-icon-ac.png" class="showText"></image>
					<image v-else src="@/static/common/circle-icon-1.png" class="showText"></image>
					<text class="control-text-show-box-item-text">邀请码</text>
				</view>
			</view>
		</view>
		<view class="share-box">
			<view class="share-box-title">分享图文至</view>
			<view class="share-item-list">
				<view @click="shareWXFriend" class="share-item-list-item">
					<image src="@/static/common/wechat-icon2.png" class="shareIcon"></image>
					<text class="shareText">微信好友</text>
				</view>
				<view @click="downloadImg" class="share-item-list-item">
					<image src="@/static/common/phone-icon.png" class="shareIcon"></image>
					<text class="shareText">保存到手机</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getGoodsSharePwd } from '@/api/home.js';

const goodsId = ref('');
const platform = ref('');

//  商品预览图列表
const currentChoosePrePicList = ref([]);
const chooseRrePic = (item) => {
	if (currentChoosePrePicList.value.find((currentChoose) => currentChoose == item)) {
		currentChoosePrePicList.value = currentChoosePrePicList.value.filter((currentChoose) => currentChoose != item);
	} else {
		currentChoosePrePicList.value.push(item);
	}
};
const allChoosePrePic = () => {
	currentChoosePrePicList.value = goodsShareInfo.value.carouselImg;
};

// 口令文案内容显示
const gapText = ref('----------------------------------------');
const showTitleText = ref(true);
const showPwdText = ref(true);
const showLinkText = ref(true);
const showRebatesText = ref(true);
const showInvitationCodeText = ref(true);

// 控制显示
const controlShow = (key) => {
	if (key == 'pwdText') {
		let pwdText = goodsShareInfo.value.pwdText;
		goodsShareInfo.value.pwdText = '';
		showPwdText.value = !showPwdText.value;
		setTimeout(() => {
			goodsShareInfo.value.pwdText = pwdText;
		}, 50);
	} else if (key == 'linkText') {
		let linkText = goodsShareInfo.value.linkText;
		goodsShareInfo.value.linkText = '';
		showLinkText.value = !showLinkText.value;
		setTimeout(() => {
			goodsShareInfo.value.linkText = linkText;
		}, 50);
	} else if (key == 'rebatesText') {
		let rebatesText = goodsShareInfo.value.rebatesText;
		goodsShareInfo.value.rebatesText = '';
		showRebatesText.value = !showRebatesText.value;
		setTimeout(() => {
			goodsShareInfo.value.rebatesText = rebatesText;
		}, 50);
	} else if (key == 'invitationCodeText') {
		let invitationCodeText = goodsShareInfo.value.invitationCodeText;
		goodsShareInfo.value.invitationCodeText = '';
		showInvitationCodeText.value = !showInvitationCodeText.value;
		setTimeout(() => {
			goodsShareInfo.value.invitationCodeText = invitationCodeText;
		}, 50);
	}
};

// 获取商品分享信息
const goodsShareInfo = ref({});
const copyShareLink = async () => {
	let res = await getGoodsSharePwd({
		goodsId: goodsId.value,
		platform: platform.value,
		weApp: true,
		hasShareText: true,
		shareUrl: true
	});
	console.log('商品分享信息接口参数：', res);
	if (res.code == 0) {
		goodsShareInfo.value = res.data;

		if (goodsShareInfo?.value?.carouselImg?.length) {
			currentChoosePrePicList.value.push(goodsShareInfo?.value?.carouselImg[0]);
		}

		if (!goodsShareInfo.value.titleText) {
			showTitleText.value = false;
		} else if (!goodsShareInfo.value.pwdText) {
			showPwdText.value = false;
		} else if (!goodsShareInfo.value.linkText) {
			showLinkText.value = false;
		} else if (!goodsShareInfo.value.rebatesText) {
			showRebatesText.value = false;
		} else if (!goodsShareInfo.value.invitationCodeText) {
			showInvitationCodeText.value = false;
		}
	}
};

// 复制文案
const copyText = () => {
	let copyTextArr = [];

	if (goodsShareInfo.value.titleText && showTitleText.value) {
		copyTextArr.push(goodsShareInfo.value.titleText);
	}
	if (gapText.value) {
		copyTextArr.push(gapText.value);
	}
	if (goodsShareInfo.value.pwdText && showPwdText.value) {
		copyTextArr.push(goodsShareInfo.value.pwdText);
	}
	if (goodsShareInfo.value.linkText && showLinkText.value) {
		copyTextArr.push(goodsShareInfo.value.linkText);
	}
	if (goodsShareInfo.value.rebatesText && showRebatesText.value) {
		copyTextArr.push(goodsShareInfo.value.rebatesText);
	}
	if (goodsShareInfo.value.invitationCodeText && showInvitationCodeText.value) {
		copyTextArr.push(goodsShareInfo.value.invitationCodeText);
	}

	let copyTextStr = copyTextArr.join('\n');

	console.log('复制文案copyTextStr', copyTextStr);

	uni.setClipboardData({
		data: copyTextStr,
		success: function () {
			uni.showToast({
				title: '分享文案复制成功',
				icon: 'none'
			});
		}
	});
};

// 分享给微信好友
const shareWXFriend = () => {
	if (currentChoosePrePicList.value.length) {
		currentChoosePrePicList.value.forEach((item, index) => {
			uni.downloadFile({
				url: item,
				success: (res) => {
					if (res.statusCode === 200) {
						// 分享图片
						uni.showShareImageMenu({
							path: res.tempFilePath
						});
					}
				}
			});
		});
	}
	
	copyText();
};

// 下载图片
const downloadImg = () => {
	if (currentChoosePrePicList.value.length) {
		currentChoosePrePicList.value.forEach((item, index) => {
			uni.downloadFile({
				url: item,
				success: (res) => {
					if (res.statusCode === 200) {
						// 保存图片
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (savRes) => {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
							},
							fail: (err) => {
								uni.showToast({
									title: '保存失败',
									icon: 'error',
									duration: 2000
								});
							}
						});
					}
				}
			});
		});
	}
};

onLoad((options) => {
	goodsId.value = options.goodsId;
	platform.value = options.platform;

	copyShareLink();
});
</script>

<style lang="scss">
.goodsShare-container {
	min-height: 100vh;
	padding: 12px;
	background-color: #f9f9f9;

	.pre-commission-box {
		display: flex;
		align-items: center;
		padding: 14px 12px;
		border-radius: 12px;
		margin-bottom: 12px;
		background-color: #fff;

		.money-icon {
			width: 16px;
			height: 16px;
			margin-right: 12px;
		}

		.pre-commission-box-text {
			font-size: 12px;
			font-weight: 400;
		}
	}

	.pre-pic-box {
		padding: 14px 12px;
		border-radius: 12px;
		margin-bottom: 12px;
		background-color: #fff;

		::webkit-scrollbar {
			display: none;
		}

		.pre-pic-box-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;

			.pre-pic-box-title-left {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 500;

				.pre-pic-box-title-left-text {
					margin-right: 12px;
				}

				.pre-pic-box-title-left-index-ac {
					color: #ff0309;
				}
			}

			.pre-pic-box-title-right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 64px;
				height: 24px;
				font-size: 12px;
				color: #ff0309;
				border-radius: 15px;
				background-color: rgba(255, 3, 9, 0.12);
			}
		}

		.pre-pic-box-list-scrollView {
			white-space: nowrap;

			.pre-pic-box-list {
				display: flex;

				.pre-pic-box-list-item {
					position: relative;
					margin-right: 10px;

					.pre-pic-box-list-item-pic {
						width: 80px;
						height: 80px;
						border-radius: 8px;
						background-color: palegoldenrod;
					}

					.pre-pic-box-list-item-pic-Choose {
						position: absolute;
						top: 6px;
						right: 6px;
						width: 16px;
						height: 16px;
					}
				}
			}
		}
	}

	.Copywriting-box {
		padding: 12px;
		border-radius: 12px;
		margin-bottom: 12px;
		background-color: #fff;

		.Copywriting-box-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;

			.Copywriting-box-title-left {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: 500;

				.Copywriting-box-title-left-text {
					margin-right: 12px;
				}
			}

			.Copywriting-box-title-right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 64px;
				height: 24px;
				font-size: 12px;
				color: #ff0309;
				border-radius: 15px;
				background-color: rgba(255, 3, 9, 0.12);
			}
		}

		.Copywriting-box-content {
			padding: 12px;
			border-radius: 8px;
			background-color: #f9f9f9;
			margin-bottom: 12px;

			.Copywriting-box-content-input {
				width: 100%;
				font-size: 12px;
				line-height: 20px;
			}
		}

		.control-text-show-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.control-text-show-box-item {
				display: flex;
				align-items: center;

				.showText {
					width: 14px;
					height: 14px;
					margin-right: 6px;
				}

				.control-text-show-box-item-text {
					font-size: 12px;
					font-weight: 500;
				}
			}
		}
	}

	.share-box {
		padding: 12px;
		border-radius: 12px;
		margin-bottom: 12px;
		background-color: #fff;

		.share-box-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;
			font-size: 14px;
			font-weight: 500;
		}

		.share-item-list {
			display: flex;
			gap: 24px;
			align-items: center;
			// justify-content: space-between;
		}

		.share-item-list-item {
			display: flex;
			gap: 10px;
			align-items: center;
			flex-direction: column;

			.shareIcon {
				width: 32px;
				height: 32px;
			}

			.shareText {
				font-size: 12px;
				font-weight: 400;
				line-height: 14px;
			}
		}
	}
}
</style>
